<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less">
@import url(./css/common.less);

#app {
  min-width: 1260px;
}

.p16 {
  padding: 16px !important;
}

.el-popover {
  padding: 0 !important;
  border: none !important;
  min-width: 40px !important;

  &.is-dark {
    background: none !important;
  }
}

.el-checkbox {

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: @main-color;
    border-color: @main-color;
  }

  .el-checkbox__inner:hover {
    border-color: @main-color;
  }

  &.is-checked,
  .is-checked {
    .el-checkbox__inner {
      background-color: @main-color !important;
    }

    .el-checkbox__label {
      color: @main-color !important;
    }
  }
}

.el-radio {
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #f85277 !important;
    background: #f85277 !important;
  }

  .el-radio__input.is-checked+.el-radio__label {
    color: #f85277 !important;
  }
}

.el-switch {
  &.is-checked .el-switch__core {
    background: @main-color !important;
    border-color: @main-color !important;
  }
}

.el-dropdown-menu {
  .el-dropdown-menu__item:not(.is-disabled):focus {
    background: #f5f7fa !important;
    color: #606266;
  }
}

.el-cascader-panel {

  .is-active,
  .in-active-path {

    .el-cascader-node__label,
    .arrow-right {
      color: @main-color !important;
    }
  }
}

.el-message-box {

  .cancel-btn,
  .el-button {
    &:hover {
      color: @main-color !important;
      border-color: #ffcbd6 !important;
      background-color: #ffeef1 !important;
    }
  }

  .confirm-btn,
  .el-button--primary {
    color: #fff;
    background-color: @main-color !important;
    border-color: @main-color !important;

    &:hover {
      background: @main-color !important;
      border-color: @main-color !important;
      color: #fff !important;
    }
  }
}

.el-table {
  th {
    background: #f9f9f9 !important;
    border: none !important;

    div {
      color: #666;
      font-weight: 400;
    }
  }

  .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: #f5f7fa;
  }
}

.el-pagination {
  .el-pager li:not(.is-active):hover {
    color: @main-color !important;
  }

  .is-active {
    background: @main-color !important;
    color: #fff !important;
  }

  .el-pagination button:hover {
    color: @main-color;
  }
}

.el-steps {

  .is-wait,
  .is-process {
    color: #c0c4cc !important;
  }

  .el-step__icon.is-text {
    border-color: #a8abb2 !important;
  }

  .is-finish {
    color: @main-color !important;

    .el-step__icon.is-text {
      border-color: @main-color !important;
    }
  }

  .el-step__head.is-finish {
    border-color: @main-color;
  }


}

.table {
  .row-btns {
    .row-btn {
      color: @main-color;

      i {
        color: @main-color;
        margin-left: 4px;
      }
    }

    .line {
      width: 2px;
      height: 16px;
      margin: 0 7px;
      border-radius: 1px;
      background-color: #f7f2f4;
    }
  }
}
</style>
